<template>
  <div class="wrapper">
    <div class="details">
      <div class="wrapp-left">
        <div class="details-icon">
          <i class="iconfont icon-icon"></i>
        </div>
        <div class="details-icons">
          <i class="iconfont icon-pinglun"></i>
        </div>
        <div class="details-icons">
          <i class="iconfont icon-shoucang"></i>
        </div>
        <div class="details-icons">
          <el-popover placement="right-start" :width="200" trigger="hover">
            <template #reference>
              <i class="iconfont icon-zhuanfa1"></i>
            </template>
            <template #default>
              <ul class="details-list">
                <li>
                  <i class="iconfont icon-jubao"></i>&nbsp;
                  <span>微信</span>
                </li>
                <li>
                  <i class="iconfont icon-jubao"></i>&nbsp;
                  <span>新浪</span>
                </li>
                <li>
                  <i class="iconfont icon-jubao"></i>&nbsp;
                  <span>QQ</span>
                </li>
              </ul>
            </template>
          </el-popover>
        </div>
        <div class="details-icons">
          <i class="iconfont icon-jubao"></i>
        </div>
        <div class="details-icons">
          <i class="iconfont icon-paizhao"></i>
        </div>
      </div>
      <div class="wrapp-cen">
        <!-- 中间文章详情 -->
        <div class="post-body">
          <h1>{{ articleList.title }}</h1>
          <div class="art-header">
            <div class="avatar">
              <img src="@/assets/images/headericon.jpg" alt="" />
            </div>
            <div class="author-info">
              <span class="author-name">
                <span>{{ articleList.nick_name }}</span>
                <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/f597b88d22ce5370bd94495780459040.svg" alt="" />
              </span>
              <p class="time-data">
                <span>{{ articleList.timeData }}</span
                ><i>·</i><span>阅读数<i>520</i></span>
              </p>
            </div>
            <div class="btn">
              <el-button type="success" plain>关注</el-button>
            </div>
          </div>
          <div class="main-contain">
            <div class="main-contain-img" v-if="articleList.pic">
              <img :src="articleList.pic" alt="" />
            </div>

            <div class="main-contain-text article-content">
              <v-md-editor v-model="articleList.info" mode="preview"></v-md-editor>
            </div>
          </div>
        </div>
        <!-- CHEN:评论 -->
        <div class="comments">
          <header class="comments-header"><h2>评论</h2></header>
          <ContentList
            :key-map="keyMap"
            :showNumber="2"
            :comment-datas="commentDatas"
            :isAdminId="articleList.user_id"
            @submitComment="submitComment"
          ></ContentList>
        </div>
      </div>

      <div class="wrapp-right">
        <div class="info">
          <div class="info-user">
            <div class="info-pic" style="width: 50px; height: 50px; border-radius: 50px; overflow: hidden">
              <!-- <el-avatar :size="50" :src="state.circleUrl" /> -->
              <img src="@/assets/images/headericon.jpg" alt="" />
            </div>
            <div class="info-text">
              <el-col>
                <div class="info-text-name">
                  <a href="#">
                    <span>{{ articleList.nick_name }}</span>
                    <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/2c3fafd535a0625b44a5a57f9f536d77.svg" alt="" />
                    <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/3cf5d81b053e9a62ca0eabbd6e2b0b72.svg" alt="" />
                  </a>
                </div>
                <div class="info-text-daii">
                  <template v-for="(i, index) in articleList.tags" :key="index">
                    <span>{{ i.tag_name }}</span>
                  </template>
                </div>
              </el-col>
            </div>
          </div>
          <div class="give-num">
            <el-col>
              <div class="give-numd">
                <i class="iconfont icon-icon"></i>
                <span>获得点赞 &nbsp;{{ infoData.infoNumd }}</span>
              </div>
              <div class="give-numd">
                <i class="iconfont icon-quanzi"></i>
                <span>文章被阅读 &nbsp;{{ infoData.infoRed }}</span>
              </div>
            </el-col>
          </div>
        </div>
        <div class="download">
          <div class="down-img">
            <a href="#">
              <img :src="state.circleEr" />
            </a>
          </div>
          <div>
            <div class="downL">下载稀土掘金APP</div>
            <div class="downB">一个帮助开发者成长的社区</div>
          </div>
        </div>
        <div class="advertising">
          <img :src="state.circleAr" alt="" />
        </div>
        <div class="article">
          <div class="article-mo">相关文章</div>
          <div class="article-corr">
            <el-col v-for="(item, index) in actirleData" :key="index">
              <a href="#" class="acticle-part">
                <div class="ac-titl">{{ item.actirleTitle }}</div>
                <div class="acticle-num">
                  <span class="acN">{{ item.actirleNum }} 点赞</span>
                  <span>&nbsp;·&nbsp;</span>
                  <span class="acN">{{ item.actirleRed }} 评论</span>
                </div>
              </a>
            </el-col>
          </div>
        </div>
        <div class="catalog">
          <div>
            <elDirectory></elDirectory>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import ContentList from '@/components/library/ContentList.vue'
// import commentlist from './component/commentlist.vue'
import elDirectory from '@/views/post/component/directory.vue'
import { addCommentApi, getArticleCommentList } from '@/api/article'
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const { proxy } = getCurrentInstance()
// 头像
const state = reactive({
  circleUrl: '@/assets/images/headericon.jpg',
  circleVip: 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/2c3fafd535a0625b44a5a57f9f536d77.svg',
  circleJy: 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/3cf5d81b053e9a62ca0eabbd6e2b0b72.svg',
  circleEr: 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/article.9d13ff7.png',
  circleAr: 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/default.640d9a7.png'
})

const infoData = ref({
  infoName: '狂奔滴小马',
  infoDaii: '前端公众号 @ JS酷',
  infoNumd: 3457,
  infoRed: 1234567
})

const actirleData = ref([
  {
    actirleTitle: '闲鱼买了份小程序源码，可开流量主',
    actirleNum: 12,
    actirleRed: 4
  },
  {
    actirleTitle: '闲鱼买了份小程序源码，可开流量主',
    actirleNum: 12,
    actirleRed: 4
  },
  {
    actirleTitle: '闲鱼买了份小程序源码，可开流量主',
    actirleNum: 12,
    actirleRed: 4
  },
  {
    actirleTitle: '闲鱼买了份小程序源码，可开流量主',
    actirleNum: 12,
    actirleRed: 4
  },
  {
    actirleTitle: '闲鱼买了份小程序源码，可开流量主',
    actirleNum: 12,
    actirleRed: 4
  }
])
let articleList = reactive({})

const keyMap = ref({
  pid: 'parent_comment_id',
  id: 'id',
  isAdmin: 'admin_comment'
})

/* 定义的评论默认数据 */
let commentDatas = ref([
  {
    id: 1,
    admin_comment: 0,
    avatar: 'https://img2.baidu.com/it/u=134769530,4268043097&fm=253&fmt=auto&app=138&f=JPEG?w=533&h=333',
    create_time: '2020-05-31 23:03:55',
    email: '',
    nickname: 'nickname1',
    parent_comment_id: null,
    content: '我是评论1'
  },
  {
    id: 2,
    admin_comment: 0,
    avatar: 'https://img2.baidu.com/it/u=3133697304,2308274678&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313',
    create_time: '2020-06-1 23:03:55',
    email: '',
    nickname: 'nickname2',
    parent_comment_id: 1,
    content: '我是评论2'
  },
  {
    id: 3,
    admin_comment: 0,
    avatar: 'https://img2.baidu.com/it/u=3772577665,2044310843&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=727',
    create_time: '2020-05-2 23:03:55',
    email: '',
    nickname: 'nickname3',
    parent_comment_id: null,
    content: '我是评论3'
  },
  {
    id: 4,
    admin_comment: 0,
    avatar: 'https://img0.baidu.com/it/u=3966731730,957573008&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=500',
    create_time: '2020-06-2 23:03:55',
    email: '',
    nickname: 'nickname4',
    parent_comment_id: 2,
    content:
      '我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,'
  }
])

/**
 * @Method 使用递归的方式处理偏平化数据
 * @param {*} list 为需要处理的数组
 * @param {*} pid  为传入的顶级id
 */
const transTreeData = (list, pid) => {
  const treeData2 = []
  list.forEach((item) => {
    // 判断每一项的 ParentId 是否等于传入的顶级 pid 一致
    if (item.parent_comment_id === pid) {
      /*  //tag: 如果有一致的数据，在将当前这一项的 id 作为顶级id对象传入   transTreeData */
      //    查看自己本身是否依然有子级分类，以此递归
      const children = transTreeData(list, item.id)
      // 判断返回的 children 进行判断
      // 如果返回空数组，说明没有子级分类，不做任何处理
      if (children.length) {
        item.child = children
      }
      /* 最终直接将当前数据 push 到treeData2即可 */
      treeData2.push(item)
    }
  })
  return treeData2
}
/* 获取文章详情 */
const getArticleList = () => {
  articleList = JSON.parse(decodeURI(route.query.params))
  console.log('文章: ', articleList)
  console.log(articleList.user_id, '文章user_id')
  /*   let newArry = articleList.comment.map((item) => {
    return {
      id: item.comment_id,
      parent_comment_id: item.father_id,
      admin_comment: item.user_id,
      avatar: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.bv8kq3518CPqhV6cTuacuwHaHh?pid=ImgDet&rs=1',
      create_time: proxy.$moment(item.create_time).format('YYYY-MM-DD HH:mm:ss'),
      email: '',
      nickname: item.nick_name,
      content: item.comment_info
    }
  }) */
  // console.log(newArry, 'newArry')
  // commentDatas.value = newArry
  // console.log(commentDatas.value, 'commentDatas.value')
}
getArticleList()
/* 获取评论列表 */
const getCommentList = async () => {
  const { article_id } = articleList
  console.log('article_id: ', article_id)
  const res = await getArticleCommentList({
    article_id: article_id
  })
  console.log('树状结构: ', res.data.data)
  /* 所有评论 */
  const { data } = res.data.data
  // console.log('所有评论: ', data)
  /* 偏平化数据 */
  // console.log('偏平化数据: ', transData(data))
  /*  let newArray = transData(data) */
  /* 将children里面的对象重新放在数组里面 */
  /*   newArray.forEach((item) => {
    if (item.children) {
      item.children.forEach((child) => {
        newArray.push(child)
      })
    }
    delete item.children
  })

  console.log('新数组: ', newArray) */
  // commentDatas.value = JSON.parse(JSON.stringify(newArray))
  commentDatas.value = JSON.parse(JSON.stringify(transData(data)))
  /* 将children解开变成一维数组 */
  // console.log('偏平化数据: ', commentDatas.value)
}
/* 子传父的emit事件用于提交评论和回复 */
const submitComment = async (item) => {
  console.log('item: ', item)
  //  const articleList = JSON.parse(decodeURI(route.query.params))
  // console.log(inputContent.value, '发布评论')
  const token = localStorage.getItem('token')
  const { article_id } = articleList
  const res = await addCommentApi({
    token,
    article_id,
    ...item
  })
  const { data } = res.data
  getCommentList()
  console.log(data, 'data')
}
//将树状结构数据处理成menu所需要的偏平化数据
/*
//tag:使用递归函数，将数组重组成一个新的数组
parms {*} arr 为传入的
*/
const transData = (arr) => {
  //定义一个空数组来接重组过后的数据 最后作为该函数的返回值
  let newData = []
  newData = arr.map((item) => {
    if (item.child instanceof Array && item.child.length > 0) {
      return {
        id: item.comment_id,
        parent_comment_id: item.father_id,
        admin_comment: item.user_id,
        avatar: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.bv8kq3518CPqhV6cTuacuwHaHh?pid=ImgDet&rs=1',
        create_time: proxy.$moment(item.created_at * 1000).fromNow(),
        email: '',
        nickname: item.nick_name,
        content: item.comment_info,
        aite: item.aite,
        article_id: item.article_id,
        icon: item.icon,
        remind_info: item.remind_info,
        showEmojiValue: false,
        children: transData(item.child)
      }
    }
    return {
      id: item.comment_id,
      parent_comment_id: item.father_id,
      admin_comment: item.user_id,
      avatar: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.bv8kq3518CPqhV6cTuacuwHaHh?pid=ImgDet&rs=1',
      create_time: proxy.$moment(item.created_at * 1000).fromNow(),
      email: '',
      nickname: item.nick_name,
      content: item.comment_info,
      aite: item.aite,
      article_id: item.article_id,
      icon: item.icon,
      remind_info: item.remind_info,
      showEmojiValue: false
    }
  })
  return newData
}
onMounted(() => {
  getCommentList()
})
</script>

<style lang="scss" scoped>
.comments {
  padding: 25px;
  margin-top: 20px;
  background-color: #fff;
  .comments-header {
    margin-bottom: 20px;
    h2 {
      font-size: 18px;
    }
  }
}
.details {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  .iconfont {
    color: #8a919f;
    font-size: 18px;
  }
}
.wrapp-left {
  width: 5%;
  position: fixed;
  margin-left: -70px;
  top: 140px;
  z-index: 2;
  height: 200px;
  /* background-color: #fff; */
}
.wrapp-cen {
  width: 70%;
  .post-body {
    padding: 25px;
    background-color: #fff;
  }
}
.wrapp-right {
  width: 25%;
}
.info {
  background-color: #fff;
  border-radius: 2px;
  padding: 20px;
  margin-bottom: 20px;
}
.info-user {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-bottom: 15px;
  border-bottom: 1px #e4e6eb solid;
}

.info-text-name a {
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  color: #252933;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.info-text-name img {
  margin-left: 5px;
}
.info-text-daii {
  margin-top: 4px;
  font-size: 14px;
  color: #515767;
  font-weight: 400;
  line-height: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.give-numd {
  margin-top: 10px;
}
.give-numd i {
  margin-right: 10px;
}
.give-numd span {
  font-size: 14px;
  color: #252933;
  font-weight: 400;
}

.download {
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 20px;
  margin-bottom: 20px;
}
.down-img {
  margin-right: 16px;
  width: 60px;
  height: 60px;
}

.downL {
  font-size: 16px;
  line-height: 20px;
  color: #252933;
}

.downB {
  font-size: 14px;
  line-height: 22px;
  margin-top: 4px;
  color: #8a919f;
}
.advertising {
  margin-bottom: 20px;
  border-radius: 4px;
  overflow: hidden;
}
.advertising img {
  border-radius: 4px;
  aspect-ratio: 971/805;
}

.article {
  background-color: #fff;
  box-shadow: none;
  border-radius: 4px;
  margin-bottom: 20px;
}
.article-mo {
  padding: 20px 0;
  margin: 0 20px;
  font-size: 16px;
  line-height: 20px;
  color: #1d2129;
  font-weight: 500;
  border-bottom: 1px #e4e6eb solid;
}
.article-corr {
  padding: 10px 0 20px;
}
.acticle-part {
  display: block;
  padding: 10px 20px;
}
.acticle-num {
  margin-top: 4px;
}
.ac-titl {
  line-height: 22px;
  font-size: 14px;
  font-weight: 400;
  color: #252933;
}
.acN {
  display: inline-block;
  font-size: 14px;
  line-height: 22px;
  color: #8a919f;
  font-weight: 400;
}
.acticle-part:hover .ac-titl {
  color: #007fff;
}
.catalog {
  position: sticky;
  top: 10px;
  background-color: #fff;
  border-radius: 4px;
  padding: 0;
}
.catalog-log {
  margin: 8px 4px 0 0;
  overflow: auto;
}
.details-icon {
  margin-bottom: 16px;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.details-icons {
  margin-bottom: 16px;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.details-icon::after {
  content: '7';
  position: absolute;
  top: 0;
  left: 75%;
  line-height: 17px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 11px;
  text-align: center;
  white-space: nowrap;
  background-color: #c2c8d1;
  color: #fff;
}
.details-list li {
  margin-top: 10px;
  padding: 10px;
}
.details-list li:hover {
  background-color: #ddd;
}
.wrapp-cen {
  height: 100%;

  h1 {
    margin-bottom: 20px;
  }
  .art-header {
    display: flex;
    align-items: center;
    height: 48px;
    margin-bottom: 20px;
    .avatar {
      height: 40px;
      width: 40px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .author-info {
      flex: 1;
      margin-left: 30px;
      display: flex;
      flex-direction: column;
      .author-name {
        font-size: 16px;
        color: #252933;
        img {
          margin-left: 10px;
        }
      }
      .time-data {
        font-size: 12px;
        margin-top: 5px;
        i {
          margin: 0 5px;
        }
      }
    }
  }
  .main-contain-img {
    width: 100%;
    height: auto;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>
